window.addEventListener(`load`, function () {
    // =========获取元素 start=========
    // 注册页面
    let register = this.document.querySelector(`.register`)
    // 登录页面
    let login = this.document.querySelector(`.login`)
    // 去注册
    let goRegister = this.document.querySelector(`.goRegister`)
    // 去登录
    let goLogin = this.document.querySelector(`.goLogin`)
    // 注册页面==账号
    let regusername = this.document.querySelector(`.register [name="username"]`)
    // 注册页面==密码
    let regpassword = this.document.querySelector(`.register [name="password"]`)
    // 登录页面==账号
    let logusername = this.document.querySelector(`.login [name="username"]`)
    // 登录页面==密码
    let logpassword = this.document.querySelector(`.login [name="password"]`)
    // =========获取元素 end=========

    // 去注册 ==》注册页面显示，登录页面隐藏
    goRegister.addEventListener(`click`, function () {
        login.style.display = `none`
        register.style.display = `block`
    })
    // 去登录 ==》注册页面隐藏，登录页面显示
    goLogin.addEventListener(`click`, function () {
        register.style.display = `none`
        login.style.display = `block`
    })

    // 表单验证 ==》封装函数
    // 验证用户名和密码
    function test() {
        return {
            fields: {
                username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
                    validators: { // 添加真正的校验规则
                        notEmpty: {   //不能为空
                            message: '用户名不能为空.'// 如果不满足校验规则，则给出这句提示
                        },
                        stringLength: {   //检测长度
                            min: 2, // 最少2位
                            max: 15, // 最多15位
                            message: '用户名需要2~15个字符'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {   //检测长度
                            min: 6,
                            max: 15,
                            message: '密码需要6~15个字符'
                        }
                    }
                }
            }
        }
    }

    // =========注册功能=========
    $('.register form').bootstrapValidator(test()).on('success.form.bv', function (e) {
        e.preventDefault();
        // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
        axios({
            url: `/api/register`,
            method: `POST`,
            data: {
                username: regusername.value,
                password: regpassword.value
            }
        }).then(res => {
            // console.log(res);
            if (res.data.code == 0) {
                toastr.success(res.data.message)
                // 注册成功直接跳转到登录页面
                register.style.display = `none`
                login.style.display = `block`
            } else {
                toastr.warning(res.data.message)
            }
        })
    });

    // =========登录功能=========
    $('.login form').bootstrapValidator(test()).on('success.form.bv', function (e) {
        e.preventDefault();
        // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
        axios({
            url: `/api/login`,
            method: `POST`,
            data: {
                username: logusername.value,
                password: logpassword.value
            }
        }).then(res => {
            console.log(res);
            if (res.data.code == 0) {
                // 存储token
                localStorage.setItem(`visualProject-token`, res.data.token)
                // 登录成功直接跳转到首页
                location.href = `./index.html`
            } else {
                toastr.error(res.data.message)
            }
        })
    });
})